<template>
  <el-dialog :title="title" v-model="dialogVisible" width="30%" :before-close="changeVisible">
    <span>
      <el-input v-model="name" placeholder="请输入内容"></el-input>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="changeVisible">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { GoodsType } from "@/utils/interface";
@Options({
  props: {
    parentID: Number,
    typeDate: Object,
    isVisible: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:isVisible"],
})
export default class goodsTypeAdd extends Vue {
  [x: string]: any;
  dialogVisible: Boolean = this.isVisible;
  title: string = "新增分类";
  name: string = "";

  mounted() {
    this.init();
  }
  // 初始化
  init() {
    if (this.typeDate.typeName) {
      this.title = "修改分类";
      this.name = this.typeDate.typeName;
    }
  }

  // 提交
  submitData() {
    if (!this.name) {
      return;
    }
    let nd: GoodsType = Object.assign({}, this.typeDate);
    nd.typeName = this.name;
    if (this.parentID) {
      nd.parentID = this.parentID;
    }
    this.API.goodsTypeAdd(nd).then(() => {
      this.$message.success("操作成功");
      // 更新分类数据
      this.$store.dispatch("appModule/updateType");
      this.changeVisible();
    });
  }

  changeVisible() {
    this.dialogVisible = this.dialogVisible ? false : true;
    this.$emit("update:isVisible", this.dialogVisible);
  }
}
</script>